<template>
	<view class="mpvue-picker">
		<view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
		<view class="mpvue-picker-content" :class="{'mpvue-picker-view-show':showPicker}">
			<view class="mpvue-picker__hd">
				<view class="mpvue-picker__action" @click="pickerCancel">取消</view>
				<view class="mpvue-picker__action" @click="pickerConfirm">确定</view>
			</view>
			<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in provinceDataList" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in cityDataList" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in areaDataList" :key="index">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import { provinceData } from '@/utils/city_data.js';
	
	export default {
		data() {
			return {
				pickerValue: [0, 0, 0],
				provinceDataList: [],
				cityDataList: [],
				areaDataList: [],
				showPicker: false,
				selectedProvince: {},
				selectedCity: {},
				selectedArea: {}
			};
		},
		created() {
			this.initPicker();
		},
		props: {
			/* 默认值 */
			pickerValueDefault: {
				type: Array,
				default() {
					return [0, 0, 0];
				}
			},
			/* 默认显示的省市区文本 */
			defaultRegion: {
				type: Array,
				default() {
					return ['', '', ''];
				}
			}
		},
		methods: {
			initPicker() {
				this.provinceDataList = provinceData;
				if (this.provinceDataList.length > 0) {
					const defaultProvince = this.provinceDataList[this.pickerValueDefault[0]];
					this.selectedProvince = defaultProvince;
					this.cityDataList = defaultProvince.children;
					if (this.cityDataList.length > 0) {
						const defaultCity = this.cityDataList[this.pickerValueDefault[1]];
						this.selectedCity = defaultCity;
						this.areaDataList = defaultCity.children;
						if (this.areaDataList.length > 0) {
							this.selectedArea = this.areaDataList[this.pickerValueDefault[2]];
						}
					}
				}
				
				// 如果有默认值，尝试定位到默认值的位置
				if (this.defaultRegion[0] && this.defaultRegion[1] && this.defaultRegion[2]) {
					this.setDefaultValue();
				}
			},
			
			// 尝试根据文本设置默认值的索引
			setDefaultValue() {
				const provinceName = this.defaultRegion[0];
				const cityName = this.defaultRegion[1];
				const areaName = this.defaultRegion[2];
				
				// 查找省份索引
				let provinceIndex = 0;
				for (let i = 0; i < this.provinceDataList.length; i++) {
					if (this.provinceDataList[i].label === provinceName) {
						provinceIndex = i;
						break;
					}
				}
				
				// 设置城市列表
				this.selectedProvince = this.provinceDataList[provinceIndex];
				this.cityDataList = this.selectedProvince.children;
				
				// 查找城市索引
				let cityIndex = 0;
				for (let i = 0; i < this.cityDataList.length; i++) {
					if (this.cityDataList[i].label === cityName) {
						cityIndex = i;
						break;
					}
				}
				
				// 设置区县列表
				this.selectedCity = this.cityDataList[cityIndex];
				this.areaDataList = this.selectedCity.children;
				
				// 查找区县索引
				let areaIndex = 0;
				for (let i = 0; i < this.areaDataList.length; i++) {
					if (this.areaDataList[i].label === areaName) {
						areaIndex = i;
						break;
					}
				}
				
				this.selectedArea = this.areaDataList[areaIndex];
				
				// 更新选择器的值
				this.pickerValue = [provinceIndex, cityIndex, areaIndex];
			},
			
			show() {
				this.showPicker = true;
			},
			
			maskClick() {
				this.pickerCancel();
			},
			
			pickerCancel() {
				this.showPicker = false;
				this.$emit('onCancel', {
					province: this.selectedProvince,
					city: this.selectedCity,
					area: this.selectedArea
				});
			},
			
			pickerConfirm() {
				this.showPicker = false;
				const region = {
					province: this.selectedProvince,
					city: this.selectedCity,
					area: this.selectedArea
				};
				this.$emit('onConfirm', region);
			},
			
			pickerChange(e) {
				const columnIndex = e.detail.value;
				
				// 如果省份列变化
				if (columnIndex[0] !== this.pickerValue[0]) {
					// 更新省份
					this.selectedProvince = this.provinceDataList[columnIndex[0]];
					// 更新城市列表
					this.cityDataList = this.selectedProvince.children;
					// 重置城市和区县
					this.selectedCity = this.cityDataList[0];
					this.areaDataList = this.selectedCity.children || [];
					this.selectedArea = this.areaDataList[0] || {};
					columnIndex[1] = 0;
					columnIndex[2] = 0;
				} 
				// 如果城市列变化
				else if (columnIndex[1] !== this.pickerValue[1]) {
					// 更新城市
					this.selectedCity = this.cityDataList[columnIndex[1]];
					// 更新区县列表
					this.areaDataList = this.selectedCity.children || [];
					// 重置区县
					this.selectedArea = this.areaDataList[0] || {};
					columnIndex[2] = 0;
				} 
				// 如果区县列变化
				else if (columnIndex[2] !== this.pickerValue[2]) {
					// 更新区县
					this.selectedArea = this.areaDataList[columnIndex[2]] || {};
				}
				
				this.pickerValue = columnIndex;
			}
		}
	};
</script>

<style>
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}
	
	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}
	
	.mpvue-picker-view-show {
		transform: translateY(0);
	}
	
	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}
	
	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}
	
	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
	}
	
	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}
	
	.mpvue-picker__action:last-child {
		text-align: right;
	}
	
	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: #fff;
	}
	
	.picker-item {
		line-height: 40px;
		text-align: center;
	}
</style> 